<template>
  <div class="tab-filter-wrapper">
      <div class="tab-key">
          <strong>{{label}}：</strong>
      </div>
      <div class="tab-content" v-if="type === 'datetime'">
          <div class="date-item">
            <el-date-picker
                v-model="timeRange"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                value-format="yyyy-MM-dd"
                @change="handleTimeChange"
                >
            </el-date-picker>
          </div>
      </div>
      <div class="tab-content" v-else>
            <div :class="['tab-value']" :style="tabStyle">
                <div ref="tabBox" :class="['radio-tab-box']">
                    <span :class="[{'checked':checkAll}]" @click="handleCheckAllChange">全选</span>
                    <div>
                        <div v-for="(tabItems, index) in tabs" :key="index">
                            <span :class="[{'checked':isChecked(item.value)}]" v-for="item in tabItems" :key="item.value" @click="handleCheckedTabsChange(item.value)">{{item.label}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="isOverflow" class="tab-op">
                <span class="tab-btn" @click="showMore = !showMore">
                    {{showMore ? '收起' : '更多'}}
                    <i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </span>
            </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'TagFilter',
    props:{
        label:String,
        type:{
            type:String,
            default:'text'
        },
        options:{
            type:Object,
            default:() => {}
        }
    },
    data(){
        return {
            isOverflow:false, 
            showMore:false,
            checkAll: false,
            checkedTabs: [],
            tabs: [],
            tabsLength:0,
            timeRange:[]
        }
    },
    computed:{
        //判断标签是否为选中状态
        isChecked(){
            return (value) => {
                return this.checkedTabs.findIndex(tab => tab === value) !== -1;
            }
        },
        tabStyle(){
            let h = this.tabs.length * 30;
            return this.showMore ? '' : {'height':`${h}px`}
        }
    },
    mounted(){
        this.tabs = Object.values(this.options);
        this.tabsLength = this.tabs.flat(Infinity).length;
        this.$nextTick(() => {
            if(this.$refs.tabBox && this.$refs.tabBox.clientHeight > this.tabs.length*30){
                this.isOverflow = true;
            }
        })
        
    },
    methods: {
      //全选或取消全选
      handleCheckAllChange(val) {
        this.checkedTabs = this.checkAll ? [] : this.tabs.flat(Infinity).map(tab => tab.value);
        this.checkAll = this.checkedTabs.length === this.tabsLength;
        this.$emit('checked-change', this.checkedTabs);
      },
      //标签选中状态改变
      handleCheckedTabsChange(value){
          let isChecked = this.checkedTabs.findIndex(tab => tab === value) !== -1;
          if(isChecked){
              this.checkedTabs = this.checkedTabs.filter(tab => tab !== value);
          }else{
              this.checkedTabs.push(value);
          }
          this.checkAll = this.checkedTabs.length === this.tabsLength;
          this.$emit('checked-change', this.checkedTabs);
      },
      //选择的时间范围改变
      handleTimeChange(val){
          this.$emit('time-change', val);
      }
    }
}
</script>

<style lang="scss" scoped>
    .tab-filter-wrapper{
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        .tab-key{
            width: 100px;
            position: relative;
            top: 3px;
        }
        .tab-content{
            display: flex;
            justify-content: space-between;
            flex: 1;
            .date-item{
                padding: 5px 0 0;
                /deep/ .el-input__inner{
                    height: 32px;
                    line-height: 32px;
                }
                /deep/ .el-input__icon{
                    line-height: 24px;
                }
                /deep/ .el-date-editor .el-range-separator{
                    width: 20px;
                    line-height: 24px;
                }
            }
        }
        .tab-value{
            flex: 1;
            overflow: hidden;
            .radio-tab-box{
                display: flex;
                span{
                    display: inline-block;
                    margin-right: 14px;
                    line-height: 30px;
                    white-space: nowrap;
                    cursor: pointer;
                }
                .checked{
                    color: #56A9FF;
                }
            }
            .check-tab-box{
                .check-item{
                    display: flex;
                }
            }
        }
        .tab-value-min{
            height: 30px;
        }
        .tab-op{
            margin-left: 8px;
        }
        .tab-btn{
            display: inline-block;
            padding: 2px 6px;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
            &:hover{
                color: #56A9FF;
                border-color: #56A9FF;
            }
        }
    }
</style>